<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<link href="images/home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="images/jquery.min.js"></script>
<script type="text/javascript" src="images/easing.js"></script>
</head>
<body>
<script>
var c = 1;//默认的classid
var r = 0;
function ajsxok(classid){
	c = classid;
	$('.tedHomepageGridApp').append("<div class='loading'>loading</div>");
	$.ajax({
		   type: "POST",
		   url: "json.php",
		   data: "classid="+classid,
		   success: function(msg){
			   $('.tedHomepageGridApp .loading').remove()
			    jsons = eval(msg);
			    $(".gridTile").remove();
				var str = '';		
				for (var i = 0; i < a.length; i++) {
					
					str += '<div style="' + sty[a[i]] + ' " id="gridTile_' + i + '" class="gridTile">';
					str += '<a class="fractal-link" href="' + jsons[a[i]].links + '"></a>';
					str += '<div style="" class="overlayTextContainer">';
					str += '	<div class="overlayTextInner">';
					str += '		<div style="' + stz[a[i]] + '" id="contentItemText_' + i + '" class="overlayText">' + jsons[a[i]].title + '</div>';
					str += '	</div>';
					str += '</div>';
					str += '<img src="' + jsons[a[i]].img + '" id="contentItemImage_' + i + '" class="gridTileImage">';
					str += '<div style="opacity: 0;" id="contentItemGreyedOut_' + i + '" class="greyAlphaOverlay">' + jsons[a[i]].Content1 + '</div>';
					str += '<div id="contentItemHighlight_' + i + '" class="whiteAlphaOverlay">' + jsons[a[i]].Content2 + '</div>';
					str += '</div>';
				}; 			
				$('.tedHomepageGridApp').append(str);			
				$('.tedHomepageGridApp .gridTile').hide();		
				fz();			
		   }
	});
}

$(document).ready(function(){
	//a = fnLuanXu(sty.length);
	a =[9,0,6,1,2,3,4,5,10,7,11,8,13,12,14,15];
	ajsxok(c);
	$('.t_left li').click( function () { 		
		if(c!=$(this).attr("classid")){					
			ajsxok($(this).attr("classid"));	
		}
	});
});

var sty = Array("left: 0px; top: 0px; height: 179px; width: 239px; ", "left: 360px; top: 0px; height: 179px; width: 239px; ", "left: 120px; top: 180px; height: 179px; width: 239px; ", "left: 360px; top: 180px; height: 179px; width: 239px; ", "left: 240px; top: 0px; height: 89px; width: 119px; ", "left: 600px; top: 0px; height: 89px; width: 119px; ", "left: 240px; top: 90px; height: 89px; width: 119px; ", "left: 600px; top: 90px; height: 89px; width: 119px; ", "left: 0px; top: 180px; height: 89px; width: 119px; ", "left: 600px; top: 180px; height: 89px; width: 119px; ", "left: 0px; top: 270px; height: 89px; width: 119px; ", "left: 0px; top: 360px; height: 89px; width: 119px; ", "left: 180px; top: 360px; height: 89px; width: 119px; ", "left: 120px; top: 360px; height: 44px; width: 59px; ", "left: 300px; top: 360px; height: 44px; width: 59px; ", "left: 600px; top: 270px; height: 44px; width: 59px; ");
var stz = Array("font-size: 14.9583px;", "font-size: 14.9583px;", "font-size: 14.9583px;", "font-size: 14.9583px;", "font-size: 14.9583px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 9.95833px;", "font-size: 7.45833px;", "font-size: 7.45833px;", "font-size: 7.45833px;");
function fz(){	
	var sty_f = sty; 
	var stz_f = stz; 
	for(var i = 0; i < sty_f.length; i++){
		var data = sty_f[i].replace('', '').split("px; ");
		var l = (data[0].replace('left:', '').replace(/[ ]/g,""));
		var t = (data[1].replace('top:', '').replace(/[ ]/g,""));
		var h = (data[2].replace('height:', '').replace(/[ ]/g,""));
		var w = (data[3].replace('width:', '').replace(/[ ]/g,""));
		var d = stz_f[i].replace('font-size: ', '').replace(';', '').replace(/[ ]/g,"");
		var arr = Array(l,t,h,w,d,i);
		
		(function(arr){		
			setTimeout("gridok('"+arr+"');", i*(140-i));		
		})(arr)
	}
}
function gridok(arr){
	arr = arr.split(",");
	var l = arr[0];
	var t = arr[1];
	var h = arr[2];
	var w = arr[3];
	var d = arr[4];
	var i = arr[5];
	$('#gridTile_'+i).animate({left:l,top:t,opacity: 'show'},80,function(){
			$('#gridTile_'+i).css({height: ''+h+'px',width: ''+w+'px'});			
			if(w==59){
				$('#contentItemText_'+i).css("font-size","0px");
			}else{
				$('#contentItemText_'+i).css("font-size",""+d+"");
			}		
			$('#gridTile_'+i).append("<em></em>");		
			$('#gridTile_'+i).hover(function() {
				var DivId = $(this).attr("id");
				t = setTimeout("view(\"" + DivId + "\");", 400);
			},
			function() {
				clearTimeout(t);
			});
			$(".gridTile").find("em").hover(function(){event.stopPropagation();},function(){event.stopPropagation();})
		});	
}

function view(obj) {
	if(!(r==0)){
		clearTimeout(r);
	}
	$('.gridTile').find('em').animate({opacity: 'show'}, 300);
	var thisDiv = $(".detailView");	
	var obj = $("#" + obj + "");
	no(obj);
	var x = obj.offset();
	if (1 == gettopleft(obj)) {
		thisDiv.css("left", $('#theAppContainer').width() - 20 - thisDiv.width() - thisDiv.offset().left);
	} else {
		thisDiv.css("left", x.left - $(".tedHomepageGridApp").offset().left - 10);
	};	
	thisDiv.css("top", x.top - $(".tedHomepageGridApp").offset().top - 10);
	thisDiv.find("img").attr({
		src: '' + obj.find("img").attr("src") + ''
	});
	thisDiv.find("a").attr({
		href: '' + obj.find("a").attr("href") + ''
	});
	thisDiv.find(".outerTextContainer").text(obj.find(".overlayText").text());
	thisDiv.find(".topTextContainer").text(obj.find(".greyAlphaOverlay").text());
	thisDiv.find(".bottomTextContainer").text(obj.find(".whiteAlphaOverlay").text());
	if (thisDiv.css("display") == "none") {
		thisDiv.fadeIn("slow");
		thisDiv.hover(
		function(){
			clearTimeout(r);
			event.stopPropagation();
		},
		function(){
			r = setTimeout("$('.gridTile').find('em').animate({opacity: 'hide'}, 300);", 800);			
			$(this).animate({opacity: 'hide'}, 300);	
			event.stopPropagation();
		});
	};
}
function gettopleft(b) {
	var c = 0;
	cc = b.offset().left + $(".detailView").width();
	dd = $('#theAppContainer').width() + $('#theAppContainer').offset().left;
	if (cc > dd) {
		c = 1;
		$(".detailView .innerContainer").css({
			float: 'right'
		});
		$(".detailView .bootomContainer").css({
			margin: '0px 0px 0px 0px'
		});
	} else {
		$(".detailView .bootomContainer").css({
			margin: '0px 0px 0px 10px'
		});
		c = 0;
		$(".detailView .innerContainer").css({
			float: 'left'
		});
	}
	return c;
}
function no(o) {
	o.hover(function(event) {
		return false;
	},
	function() {
		return false;
	});
}
function fnLuanXu(num) {  
	var aLuanXu=[];  
	for (var i = 0; i < num; i++) {  
		aLuanXu[i] = i;  
	}  
	aLuanXu.sort(function(){return Math.random()>0.5?-1:1;})  
	return aLuanXu;  
}  
</script>
<style>
.t_left { margin:20px; float:left; width:200px;}
.t_left li{ height:30px; cursor:pointer;}
.t_right { margin:20px; float:left; width:600px;}
</style>
<div style=" margin:100px auto;">
	<div class="t_left">
		<!-- 此处循环出类别ID -->
		<ul>
			<li classid=1>classname</li>
			<li classid=2>classname</li>
		</ul>
	</div>
	<div class="t_right"> 
		<!--/特效开始/-->
		<div id="theAppContainer" class="tedHomepageGridApp">
			<div class="panel detailView">
				<div class="innerContainer"> <a href="#"><img src="" style=" width:240px; height:180px;" ></a> </div>
				<div style=" float:left; width:200px; margin-left:10px;" class="bootomContainer">
					<div class="outerTextContainer"></div>
					<div class="topTextContainer"></div>
					<div class="bottomTextContainer"></div>
				</div>
			</div>
		
		</div>
		<!--/特效结束/--> 
	</div>
</div>
</body>
</html>